<template>
  <view class="uni-wrap">
    <scroll-view class="pb-50">
      <uni-forms ref="form" :border="true" :model="formData" :rules="rules" err-show-type="toast">
        <uni-card title="表头" :is-shadow="false" :border="false">
          <view class="my-info">
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>物流组织</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ detail.name }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>合同号</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ detail.vdef3 }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>单据号</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ detail.vbillcode }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>单据日期</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ detail.dbilldate || '-' }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>总数量</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ detail.ntotalastnum }}</text>
                  </view>
                </view>
              </view>
            </view>

            <uni-forms-item label="仓库" name="cwarehouseid" :label-width="labelWidth" required>
              <as-select
                v-model="formData.cwarehouseid"
                title="仓库选择"
                placeholder="请选择"
                :options="warehouseList"
                labelKey="name"
                valueKey="code"
              />
            </uni-forms-item>
          </view>
        </uni-card>

        <uni-card title="表体" :is-shadow="false" :border="false">
          <view
            class="item"
            v-for="(item, index) in formData.deliveryBList"
            :key="index"
            style="border-bottom: 4px solid #eee;"
          >
            <uni-forms-item :label="'产品' + (index+ 1)" name="oldCode" :label-width="labelWidth"></uni-forms-item>

            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>物料编码</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ item.materialCode }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>物料名称</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ item.materialName }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>规格型号</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ item.materialspec }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>单位</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ item.unit }}</text>
                  </view>
                </view>
              </view>
            </view>

            <view class="my-info-item">
              <view class="my-info-item__container">
                <view class="my-info-item__content">
                  <view class="my-info-item__content-title">
                    <text>应发数量</text>
                  </view>
                </view>
                <view class="my-info-item__extra">
                  <view class="my-info-item__extra-text">
                    <text>{{ item.nastnum }}</text>
                  </view>
                </view>
              </view>
            </view>

            <uni-forms-item label="产生品计算" name="spec" :label-width="labelWidth">
              <div class="flex-row">
                <uni-easyinput
                  v-model="item.spec"
                  :placeholderStyle="placeholderStyle"
                  placeholder="规格(kg)"
                />
                <text style="margin: 0 4px;">*</text>
                <uni-easyinput
                  v-model="item.number"
                  :placeholderStyle="placeholderStyle"
                  placeholder="数量"
                />
              </div>
            </uni-forms-item>
            <uni-forms-item label="实发数量(吨)" name="nnum" :label-width="labelWidth">
              <uni-easyinput
                :value="calculation(item.spec, item.number, item)"
                :placeholderStyle="placeholderStyle"
                placeholder="请输入"
              />
            </uni-forms-item>
            <uni-forms-item
              label="批次号"
              :name="['deliveryBList', index, 'vbatchcode']"
              :label-width="labelWidth"
            >
              <view
                class="scan-box"
                @click="openScan(index)"
                style="display: flex;align-items: center;"
              >
                <uni-easyinput
                  placeholder="扫码带入"
                  v-model="formData.deliveryBList[index].vbatchcode"
                  :disabled="true"
                  :inputBorder="false"
                />

                <uni-icons type="scan" :size="28" color="#1677FF" />
              </view>
            </uni-forms-item>
          </view>
        </uni-card>
      </uni-forms>
    </scroll-view>

    <view class="bottomFixed">
      <view class="btn-box">
        <button type="primary" class="btn-main" @click="submit('form')">出库</button>
      </view>
    </view>
  </view>
</template>

<script>
var _self = this;
import { Decrypt } from "../../common/util";

export default {
  data() {
    return {
      id: "",
      baseUrl: "",
      detail: {},
      imgErrorUrl: "/static/img_error.png",
      dictDatas: {
        source_type: [],
        steelcyinder_type: [],
        bottle: [],
        workshop: [],
        unitList: [
          {
            value: "g",
            label: "g"
          },
          {
            value: "kg",
            label: "kg"
          }
        ]
      },
      placeholderStyle: "font-size: 14px",
      labelWidth: 100,
      formData: {
        cwarehouseid: "",
        deliveryBList: [
          {
            materialCode: "", //物料编号
            materialName: "", //物料名称
            materialspec: "", //规格型号
            unit: "", //单位
            nastnum: 0, //应发数量
            nnum: 0, //实收数量
            vbatchcode: "" //批次号
          },
          {
            materialCode: "",
            materialName: "",
            materialspec: "",
            unit: "",
            nastnum: 1,
            nnum: 0,
            vbatchcode: ""
          }
        ]
      },
      rules: {
        cwarehouseid: {
          rules: [
            {
              required: true,
              errorMessage: "请选择仓库"
            }
          ]
        }
      },
      warehouseList: []
    };
  },
  onLoad(params) {
    _self = this;
    this.baseUrl = this.$baseUrl; //全局变量baseUrl 单页面要先赋值再使用

    // if (params) {
    //   this.id = params.bottleid;
    // }
    this.getDicData("source_type");
    this.getDicData("steelcyinder_type");
    this.getDicData("bottle");
    this.getDicData("workshop");
    this.getWarehouseList();
  },
  onShow() {
    let sendoutInfo = JSON.parse(uni.getStorageSync("sendoutInfo"));
    sendoutInfo.deliveryBList.map(item => {
      item.csourcebillhid = sendoutInfo.csourcebillhid;
    });

    console.log("after handle info", sendoutInfo);
    this.detail = sendoutInfo;
    this.formData = sendoutInfo;

    // this.getDetail(this.id);
  },
  onReady() {},
  methods: {
    calculation(spec, num, row) {
      console.log("calc", spec, num);
      let value = (spec * num) / 1000;
      row.nnum = value;
      return value;
    },
    getDetail(id) {
      this.$get(`/basicData/steelcyinder/${id}`, {}).then(res => {
        this.detail = res.data;
      });
    },
    getDicData(dictKey) {
      let that = this;
      this.$get(`/system/dict/data/type/${dictKey}`, {}).then(res => {
        this.dictDatas[dictKey] = res.data;
      });
    },
    getKeyName(dictData, curKey) {
      let result = dictData.find(item => {
        return item.dictValue == curKey;
      });
      return result && result.dictLabel;
    },
    getWarehouseList() {
      this.$post("/nccloud/getStordoc", {}).then(res => {
        this.warehouseList = res.data;
      });
    },

    //批次号扫码
    openScan(index) {
      let that = this;
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function(res) {
          console.log("条码内容：" + res.result);
          let result = JSON.parse(res.result && Decrypt(res.result));
          console.log("解密后，", result);
          if (result) {
            console.log("result.code", result.code);
            const materialCode = this.deliveryBList[index].materialCode;
            if (result.vbatchcode != materialCode) {
              uni.showModal({
                title: "提示",
                content: "发货物料与扫描物料编码不一致，请核对后重新操作！",
                success: function() {
                  
                }
              });
              return false;
            }
            that.formData.deliveryBList[index].vbatchcode = result.vbatchcode;
          }
        }
      });
    },

    submit(ref) {
      this.$refs[ref].validate().then(formDatas => {
        uni.showLoading({
          title: "提交中...",
          mask: true
        });
        let subParams = {
          saleOutHeadVO: {
            cwarehouseid: this.formData.cwarehouseid
          },
          saleOutBodyVOList: this.formData.deliveryBList
        };

        let url = "/nccloud/saleout/saveRefDelivery";
        console.log(subParams);
        this.$post(url, subParams).then(res => {
          uni.hideLoading();
          if (res && res.code == 200) {
            uni.showModal({
              title: "提示",
              content: "出库成功",
              success: function() {
                uni.navigateBack({
                  delta: 1
                });
              }
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none"
            });
          }
        });
      });
    }
  }
};
</script>

<style lang="scss">
.uni-wrap {
  height: auto;
}
.flex-row {
  display: flex;
  align-items: center;
}
</style>
